import React, { PureComponent } from 'react';
// import ReactEcharts from 'echarts-for-react';

import { connect } from 'umi';
import moment from 'moment';
import { Card, Spin } from 'antd';
import { Link }  from 'umi';
import { formatMessage } from 'umi';
// import cookie from 'js-cookie';
import { get as _get } from 'object-path';
import isEmpty from 'lodash/isEmpty';
import random from 'lodash/random';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import MonthDtae from '@/components/MonthDate';

// 组件
import { withRoutePage } from '@/utils/enhanceUtils';
// import Enter from './ListPage/Enter';  旧的考勤常用流程
import NewEnter from './ListPage/NewEnter'; // 新的考勤常用流程

import DetailPage from './ListPage/DetailPage';
// import styles from './List.less';

@withRoutePage
@connect(({ attendanceMineList, loading }) => ({
    attendanceMineList,
    loading: loading.models.attendanceMineList
}))
class AttendanceMineList extends PureComponent {
    state = {
        thisMonth: moment().format('YYYY-MM'),
        random: null
    };

    componentDidMount() {
        this.getData(moment().format('YYYY-MM'));
    }

    // 计算获取最后一天方法
    getEndTime = m => {
        const lastDay = moment(
            moment(m)
                .endOf('month')
                .format('YYYY-MM-DD')
        );
        if (moment().format('MM') === moment(m).format('MM')) {
            return moment().format('YYYY-MM-DD');
        }
        return lastDay.format('YYYY-MM-DD');
    };

    getData = month => {
        const { dispatch } = this.props;
        dispatch({
            type: 'attendanceMineList/getData',
            payload: {
                startTime: moment(month)
                    .startOf('month')
                    .format('YYYY-MM-DD'),
                endTime: this.getEndTime(month),
                whichMonth: month || ''
            }
        });
    };

    // 考勤月日期修改
    search = date => {
        this.setState(
            {
                thisMonth: _get(date, '').format('YYYY-MM'),
                random: random(0, 10)
            },
            () => {
                this.getData(_get(date, '').format('YYYY-MM'));
            }
        );
    };

    render() {
        const { attendanceMineList, loading } = this.props;
        const main = _get(attendanceMineList, 'main', {});
        // const { MonthPicker } = DatePicker;
        const {
            thisMonth
            // random
        } = this.state;
        return (
            <PageHeaderWrapper>
                <NewEnter />
                <Card
                    title={formatMessage({
                        id: 'stat.name.kqy'
                    })}
                    extra={
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <Link
                                to={{
                                    pathname: '/personal/portal/attendance/mine/log'
                                }}
                                style={{ marginRight: 12 }}
                            >
                                查看考勤日历
                            </Link>
                            <MonthDtae onClick={this.search} defaultValue={moment(_get(this.state, 'thisMonth', ''))} />
                        </div>
                    }
                    headStyle={{ borderBottom: 0 }}
                    bordered={false}
                    bodyStyle={{ display: 'none' }}
                />
                <Spin spinning={loading}>
                    <DetailPage
                        data={main}
                        empty={isEmpty(main) ? 1 : 0}
                        selectionTime={thisMonth}
                        thisMonth={thisMonth}
                        random={random}
                    />
                </Spin>
            </PageHeaderWrapper>
        );
    }
}

export default AttendanceMineList;
